<template>
	<view>
		<view>
			<uni-section titleFontSize="19px" title="成员选择" type="line">
				<view class="member">
					<u-row>
						<u-col span="3">
							<view>
								<u-button disabled="true" type="primary"
									size="small">发&nbsp;&nbsp;&nbsp;起&nbsp;&nbsp;&nbsp;人</u-button>
							</view>
						</u-col>
						<u-col span="9">
							<scroll-view scroll-x="true" class="scrollView">
								<view class="scrollViewItem">
									<u-tag :text="userData.value?.user?.name" type="success" size="mini" mode="light" />
								</view>
							</scroll-view>
						</u-col>
					</u-row>
				</view>
				<view class="member">
					<u-row>
						<u-col span="3">
							<view>
								<u-button @click="principal" type="primary" size="small">选择负责人</u-button>
							</view>
						</u-col>
						<u-col span="9">
							<scroll-view scroll-x="true" class="scrollView">
								<view :key="index" v-for="(item,index) in userData?.value?.projectMemberList"
									class="scrollViewItem">
									<u-tag :text="item.name" type="success" size="mini" mode="light" />
								</view>
							</scroll-view>
						</u-col>
					</u-row>
				</view>
				<view class="member">
					<u-row>
						<u-col span="3">
							<view>
								<u-button @click="addMember" type="primary"
									size="small">添&nbsp;加&nbsp;成&nbsp;员</u-button>
							</view>
						</u-col>
						<u-col span="9">
							<scroll-view scroll-x="true" class="scrollView">
								<view :key="index" v-for="(item,index) in userData?.value?.projectMemberList"
									class="scrollViewItem">
									<u-tag :text="item.name" type="success" size="mini" mode="light" />
								</view>
							</scroll-view>
						</u-col>
					</u-row>
				</view>
			</uni-section>
		</view>
		<view>
			<uni-popup ref="popupShow" type="bottom" background-color="#fff">
				<PersonSelect :title="title" :selectedItems="personObj">
					<template #s2>
						<view>
							<u-button @click="addPersonnel" type="primary" size="small">确定</u-button>
						</view>
					</template>
				</PersonSelect>
			</uni-popup>
		</view>
		<view style="padding-bottom: 15px;">
			<uni-section titleFontSize="19px" title="基本信息" type="line">
				<view style="margin: 0px 10px 0px 10px;">
					<u-form ref="formRef" label-align="center" label-style="font-size: 14px">
						<u-form-item :required="true" label="项目名称" label-width="70">
							<uni-easyinput @change="userData.value.name = $event"
								:value="userData?.value?.name"></uni-easyinput>
						</u-form-item>
						<u-form-item label="项目内容" label-width="70">
							<view class="text">
								<textarea @change="userData.value.content = $event" :value="userData?.value?.content"
									style="width: 100%;height: 100%;font-size: 13px;" />
							</view>
						</u-form-item>
						<u-form-item :required="true" label="项目起止日期" label-width="90">
							<uni-datetime-picker v-model="dateTime" type="daterange" @change="dateChange" />
						</u-form-item>
						<u-form-item label="归属公司/部门" label-width="70">
							<uni-easyinput :value="userData?.value?.departName" @focus="openDepart()"></uni-easyinput>
						</u-form-item>
						<u-form-item @change="userData.value.remark = $event" label="公告" label-width="70">
							<view class="text">
								<textarea :value="userData?.value?.remark"
									style="width: 100%;height: 100%;font-size: 13px;" />
							</view>
						</u-form-item>
						<u-form-item label="星级" label-width="70">
							<uni-rate :disabled="flag" @change="userData.value.rate = $event.value" allow-half
								:value="userData?.value?.rate" />
						</u-form-item>
					</u-form>
				</view>
			</uni-section>
			<view>
				<uni-drawer ref="showRight" mode="right" :mask-click="false">
					<view class="scroll-view">
						<scroll-view class="scroll-view-box" scroll-y="true">
							<view class="uni-ma-3">
								<button type="warn" size="mini" @click="closeDrawer('showRight')">关闭</button>
							</view>
							<view class="info-content">
								<DaTree ref="DaTreeRef" :data="roomTreeData" labelField="name" valueField="id"
									defaultExpandAll @change="handleTreeChange"></DaTree>
							</view>
						</scroll-view>
					</view>
				</uni-drawer>
			</view>
			<uni-section titleFontSize="19px" title="项目成员" type="line">
				<scroll-view :scroll-x="true" style="padding: 5px 5px 5px 5px;">
					<uni-table border style="height: 300px;">
						<uni-tr>
							<uni-th width="50"></uni-th>
							<uni-th width="150">姓名</uni-th>
							<uni-th width="150">项目角色</uni-th>
							<uni-th width="100">工作内容</uni-th>
							<uni-th width="200">项目进度</uni-th>
							<uni-th width="110">个人奖金</uni-th>
							<uni-th width="150">操作</uni-th>
						</uni-tr>
						<uni-tr :key="index" v-for="(item,index) in userData?.value?.projectMemberList">
							<uni-td align="center">{{index+1}}</uni-td>
							<uni-td>{{item.name}}</uni-td>
							<uni-td>
								<view style="padding: 4px;display: flex;width: 150px;">
									<scroll-view scroll-x="true" class="scrollView">
										<view class="scrollViewItem" v-if="item.identityTypeName">
											<u-tag :text="item.identityTypeName" type="success" size="mini"
												mode="light" />
										</view>
									</scroll-view>
								</view>
							</uni-td>
							<uni-td>
								<view style="padding: 0px 10px 0px 10px;">
									<u-button type="primary" size="mini">点击查看</u-button>
								</view>
							</uni-td>
							<uni-td>
								<view
									style="display: flex;justify-content: left;align-items: center;padding: 0px 5px 0px 5px;">
									<view style="width: 150px;">
										<u-slider @change="sliderChagne(item,$event)"
											v-model="item.progress"></u-slider>
									</view>
									<uni-number-box @change="sliderChagne(item,$event)" :max="100"
										:value="item.progress"></uni-number-box>
								</view>
							</uni-td>
							<uni-td>
								<view style="padding: 0px 5px 0px 5px;">
									<uni-number-box @change="countMoneyChange(item,$event)"
										:value="item.personalBonus"></uni-number-box>
								</view>
							</uni-td>
							<uni-td>
								<view style="padding: 4px;display: flex;width: 150px;">
									<scroll-view scroll-x="true" class="scrollView">
										<view class="scrollViewItem">
											<u-button @click="delMember(item)" type="error" size="mini">移除</u-button>
										</view>
									</scroll-view>
								</view>
							</uni-td>
						</uni-tr>
					</uni-table>
				</scroll-view>
			</uni-section>
			<uni-section titleFontSize="19px" title="项目奖金" type="line">
				<scroll-view :scroll-x="true" style="padding: 5px 5px 5px 5px;">
					<uni-table border emptyText="">
						<uni-tr>
							<uni-th width="150" align="center">成员奖金总额</uni-th>
							<uni-th width="150">{{userData?.value?.initialBonus}}</uni-th>
							<uni-th width="150" align="center">额外金额</uni-th>
							<uni-th width="150">
								<view>
									<uni-number-box @change="additionalBonusChagne"
										:value="userData?.value?.additionalBonus"></uni-number-box>
								</view>
							</uni-th>
							<uni-th width="150" align="center">总额</uni-th>
							<uni-th
								width="150">{{userData?.value?.initialBonus + userData?.value?.additionalBonus}}</uni-th>
						</uni-tr>
						<uni-tr></uni-tr>
					</uni-table>
				</scroll-view>
			</uni-section>
			<uni-section titleFontSize="19px" title="项目工序" type="line">
				<process-bar :day="userData?.value?.progressDay" :list="userData?.value?.projectWorkFlowList"
					ref="myRef"></process-bar>
			</uni-section>
		</view>
		<view style="padding-bottom: 15px;">
			<u-row>
				<u-col span="2"></u-col>
				<u-col span="3">
					<u-button @click="save" type="primary">保存</u-button>
				</u-col>
				<u-col span="2">
				</u-col>
				<u-col span="3">
					<u-button @click="clear">清空</u-button>
				</u-col>
				<u-col span="2"></u-col>
			</u-row>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		watch,
		inject,
	} from 'vue';
	import ProcessBar from '@/components/process-bar/process-bar.vue';
	import DaTree from '@/components/da-tree/index.vue';
	import PersonSelect from "@/pages/components/person-select/person-select.vue"
	import {
		onLoad
	} from '@dcloudio/uni-app';

	const http = inject("$http");

	onLoad((options) => {
		id.value = options;
	})

	const flag = (false);
	const personObj = reactive([]);
	const popupShow = ref(null);
	const formRef = ref(null);
	const myRef = ref(null);
	const id = ref();
	const value1 = ref(0);
	const memberMoney = ref(0);
	const extra = ref(0);
	const rental = ref(0);
	const allsubmitkeys = ref([]);
	const dateTime = ref([])
	const userData = reactive({});
	const roomTreeData = ref([]);
	const showRight = ref();
	const identityType = ref(0);
	const title = ref(null);

	function delMember(item) {
		for (var i = 0; i < userData.value.projectMemberList.length; i++) {
			if (userData.value.projectMemberList[i].id == item.id) {
				userData.value.projectMemberList.splice(i, 1);
				personObj.splice(i, 1);
			}
		}
	}

	function addPersonnel() {
		userData.value.projectMemberList.splice(0, userData.value.projectMemberList.length);
		personObj.forEach(item => {
			let obj = {};
			obj.id = item.id;
			obj.identityType = identityType.value;
			obj.name = item.name;
			obj.personalBonus = 0;
			obj.userId = item.id;
			userData.value.projectMemberList.push(obj);
		})
		popupShow.value.close();
	}

	function principal() {
		popupShow.value.open();
		title.value = "选择负责人";
		// identityType.value = 0;
	}

	function addMember() {
		popupShow.value.open();
		title.value = "添加成员";
		// identityType.value = 3;
	}

	function save() {
		http.post("/projectPlan/edit", userData.value, "json").then((res) => {
			console.log(res);
			uni.navigateBack({
				delta: 1
			});
		}).catch((re) => {
			console.log(re)
		});
	}

	function clear() {
		userData.value.name = "";
		userData.value.content = "";
		dateTime.value = [];
		userData.value.departName = "";
		userData.value.remark = "";
		userData.value.rate = "";
		userData.value.projectMemberList = [];
		userData.value.progressDay = 0;
		userData.value.progress = 0;
		userData.value.initialBonus = 0;
		userData.value.projectWorkFlowList = [];
	}

	function additionalBonusChagne(event) {
		userData.value.additionalBonus = event;
	}

	function countMoneyChange(item, money) {
		item.personalBonus = money;
		let count = 0;
		for (let i = 0; i < userData.value.projectMemberList.length; i++) {
			count = count + userData.value.projectMemberList[i].personalBonus
		}
		userData.value.initialBonus = count;
	}

	function handleTreeChange(allSelectedKeys, currentItem) {
		userData.value.departId = currentItem.key;
		userData.value.departName = currentItem.label;
	}

	function dateChange(date) {
		userData.value.startTime = date[0];
		userData.value.endTime = date[1];
	}

	function sliderChagne(item, value) {
		item.progress = value;
	}

	//选择部门
	function openDepart() {
		showRight.value.open();
		http.post("/depart/getAll").then((res) => {
			if (res && res.data && res.data.code == 1) {
				roomTreeData.value = res.data.data;
			}
		}).catch((re) => {
			console.log(re)
		});
	}

	function closeDrawer() {
		showRight.value.close();
	}

	watch(id, (newValue, oldValue) => {
		http.post("/projectPlan/getById", newValue).then((res) => {
			userData.value = res.data.data;
		})
	})

	watch(userData, (newValue, oldValue) => {
		personObj.splice(0, personObj.length, ...userData.value.projectMemberList);
		dateTime.value = [userData.value.startTime, userData.value.endTime];
	})
</script>

<style scoped>
	.scrollView {
		display: flex;
		white-space: nowrap;
	}

	.scrollViewItem {
		display: inline-block;
		margin-left: 10px;
	}

	.member {
		padding-bottom: 10px;
		margin-left: 5px;
	}

	.tagList {
		width: 100%;
		height: 40px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
	}

	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
	}

	.text {
		width: 96.5%;
		height: 55px;
		border: 1px solid #e5e5e5;
		border-radius: 5px;
		margin-top: 7px;
		padding: 5px;
	}
</style>